<template>
  <Bread>
    <BreadItem to="/">首页</BreadItem>
    <BreadItem :to="`/category/sub/${subBreadInfo.top?.id}`">{{
      subBreadInfo.top?.name
    }}</BreadItem>
    <transition name="fade-right" mode="out-in">
      <BreadItem :key="subBreadInfo.sub?.id">{{
        subBreadInfo.sub?.name
      }}</BreadItem>
    </transition>
  </Bread>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { useCategoryStore } from '@/store/modules/category'
import { storeToRefs } from 'pinia'
import { computed } from 'vue'
defineOptions({
  name: 'SubBread'
})
/** 获取路由信息对象 */
const route = useRoute()
console.log(route.params.id)
/** 从category仓库中获取分类列表数据 */
const { categoryList } = storeToRefs(useCategoryStore())
console.log('categoryList', categoryList.value)

interface BreadItemInfo {
  sub?: {
    id: string
    name: string
  }
  top?: {
    id: string
    name: string
  }
}
/** 获取面包屑一级和二级信息 */
const subBreadInfo = computed(() => {
  let obj: BreadItemInfo = {}
  categoryList.value.forEach((cate) => {
    cate.children.forEach((child) => {
      if (child.id === route.params.id) {
        obj.sub = { id: child.id, name: child.name }
        obj.top = { id: cate.id, name: cate.name }
      }
    })
  })
  return obj
})

console.log(subBreadInfo.value)
</script>

<style lang="scss" scoped></style>
